// components/mp-waterfall/index.js
Component({
	properties: {
		// 图片域名地址
		baseUrl: {
			type: String,
			value: ""
		},
		// 列数
		colNum: {
			type: Number,
			value: 2
		},
		// 左右间隔,支持带css单位
		gutter: {
			type: String,
			optionalTypes: [Number],
			value: 10
		},
		// 数据列表
		list: {
			type: Array,
			value: []
		},
		// 唯一标识的key
		idKey: {
			type: String,
			value: 'id'
		},
		// 图片的key
		imageKey: {
			type: String,
			value: 'image'
		},
	},
	data: {
		// 数据列表
		waterList: [],
		// 每列数据
		cols: [],
		// 列宽度
		colWidth: 0,
		// 左右列间距
		_gutter: '',
	},

	lifetimes: {
		created() {
		},
		attached() {
			// 在组件实例进入页面节点树时执行
			let { gutter } = this.data
			this.initCols()
			// 设置间距
			if (Number.isNaN(Number(gutter))) {
				this.setData({ _gutter: gutter })
			} else {
				this.setData({ _gutter: gutter + 'rpx' })
			}
			// 获取列宽
			let query = wx.createSelectorQuery().in(this)
			query.select('.waterfall .col').boundingClientRect(rect => {
				let cw = rect.width
				// console.log('cw', cw)
				this.setData({
					colWidth: cw
				})
			}).exec()
		},
		detached() {
			console.log("kkkkkpppp")
		}
	},

	observers: {
		list(newList, oldList) {
			// console.log(newList, oldList)
			// this.reset()
			// this.setData({
			// 	waterList: newList,
			// })
			let waterList = new Array(newList.length).fill(null);
			this.setData({
				waterList
			})
		}
	},

  /**
   * 组件的方法列表
   */
  methods: {
		initCols() {
			let { colNum } = this.data
			let cols = new Array(colNum)
			for (let i = 0; i < colNum; i++) {
				cols[i] = []
			}
			console.log(cols)
			this.setData({
				cols,
			})
		},
		onImageLoad(e) {
			let { colWidth, waterList } = this.data
			let { item, index } = e.currentTarget.dataset;
			let oImgW = e.detail.width // 图片原始宽度
			let oImgH = e.detail.height // 图片原始高度
			let scale = colWidth / oImgW // 比例计算
			let imgHeight = oImgH * scale // 自适应高度
			item.imgHeight = imgHeight
			waterList.splice(index,1,item)
			this.setData({
				waterList
			})
			this.appendInOrder()
		},
		// 图片加载失败
		onImageError(e) {
			let { item, index } = e.currentTarget.dataset;
			// 高度设为1，不显示图片
			item.imgHeight = .01
			waterList.splice(index,1,item)
			this.setData({
				waterList
			})
			this.appendInOrder()
		},
		// 按顺序显示时，检查这一波是否加载完毕,加载完插入页面
		appendInOrder() {
			let { waterList } = this.data
			if ((waterList.findIndex(item => item === null) === -1)) {
				this._render(waterList,0)
			}
		},
		_render(items, i, callback) {
			let { cols } = this.data
			if (items.length > i) {
				this.appending = true
				const query = wx.createSelectorQuery().in(this)
				this.colNodes = query.selectAll('.waterfall .col')
				this.colNodes.boundingClientRect().exec(arr => {
					const item = items[i]
					const rects = arr[0]
					let colsHeight = rects.map(item => item.height)
					let minHeightIndex = colsHeight.indexOf(Math.min.apply(Math, colsHeight));
					// cols[minHeightIndex].push(item)
					let len = cols[minHeightIndex].length
					this.setData({
						[`cols[${minHeightIndex}][${len}]`]: item
					}, () => {
						// console.log(this.data.cols)
						this._render(items, ++i, callback)
					})
				})
			} else {
				callback&& callback()
			}
		},
	}
})
